<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用工具栏</title>

 
  <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
  <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
  <script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
  <script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
  <script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>
  <style>
  	body{
  		padding:30px;
  	}
  	.row table{
  		margin-left:9px;
  	}
  	.row thead{
  		background:#DFF0D8;
  	}
  	.row table th,.row table td{
  		text-align:center;
  	}
  	.well{
  		background:#DFF0D8;
  		width:97.7%;
  	}
  </style>
 
</head>
<body>
 	<div class="well">
 		<form class="" action="<%=basePath%>user/show">
 			<input type="text" name="keyword" class="control-text span-width" placeholder="用户名…">
 			<input type="submit" class="button button-info" value="查询" style="margin-left:30px;">
 			<a href="#" id="addUser" class="button button-default" style="margin-left:30px;">添加</a>
 		</form> 
 		
 	</div>
 	<center><s:property value="tip"/></center>
	<div class="row">
		
	    <table  class="table table-bordered">
	      <thead>
	       
	        <tr>
	          <th>用户ID</th>
	          <th>用户名称</th>
	          <th>用户邮箱</th>
	          <th>用户密码</th>
	          <th>操作</th>
	        </tr>
	      </thead>
	      <tbody>
	         <!-- 迭代输出数据 -->
			<s:iterator value="pageInfo.basePageList" var="one">
			<tr>
				<td><s:property value="#one.id"/></td>
				<td> <s:property value="#one.firstName"/></td>
				<td> <s:property value="#one.email"/></td>
				<td> <s:property value="#one.password"/></td>
				<td>
					<!-- 修改按钮 -->
		          	<a class="update button" title="<s:property value="#one.id"/>" style="border:0px;"  ><i class="icon-black icon-edit"></i></a>
		          	
	              	<a href="<%=basePath%>user/delete?user.id=<s:property value="#one.id"/>" 
	              		class="delete button" style="border:0px;"  ><i class="icon-black icon-trash"></i>
	              	</a>
	         	 </td>
			</tr>
			</s:iterator>
	      </tbody>
	    </table>
	    
	    <div>
	      <div class="pagination pull-right">
	        <ul>
				<!-- 显示总记录数和总页数 -->
				<li class="disabled" style="letter-spacing:2px;">
					<a href="">
						总共<s:property value="pageInfo.rootListSize"/>条/<s:property value="pageInfo.pageCount"/>页
					</a>
				</li>

				<!-- 是否要上一页按钮 -->
				<s:if test="pageInfo.nowPage>1">
					<li class="active">
						<a href="<%= basePath %>user/show?targetPage=<s:property value="pageInfo.nowPage - 1"/>">« 上一页</a>
					</li>
				</s:if>
				<s:else>
					<li class="disable">
						<a href="#">« 上一页</a>
					</li>
				</s:else>
				
				<!-- 迭代输出每一页的页号 -->
				<s:iterator value="pageInfo.pageNoList" var="page">
					<!-- 首先确保不是-1 -->
					<s:if test="#page != -1">
						<s:if test="#page != 0">
							<!-- 如果是当前页，特殊颜色显示 -->
							<s:if test="#page == pageInfo.nowPage">
								<li class="active">
									<a href="<%= basePath %>user/show?keyword=<s:property value="keyword"/>&targetPage=<s:property value="#page"/>">
										<s:property value="#page"/>
									</a>
								</li>
							</s:if>
							
							<!-- 否则一般颜色显示 -->
							<s:else>
								<li>
									<a href="<%= basePath %>user/show?keyword=<s:property value="keyword"/>&targetPage=<s:property value="#page"/>">
										<s:property value="#page"/>
									</a>
								</li>
							</s:else>
						</s:if>
						<s:else>
							<li>
								<a href="<%= basePath %>user/show?keyword=<s:property value="keyword"/>&targetPage=1">...</a>
							</li>
						</s:else>
					</s:if>
				</s:iterator>
				
				<!-- 是否需要最后一页的按钮 -->
				<s:if test="pageInfo.pageCount == pageInfo.nowPage">
					<li class="disable">
						<a href="#">下一页 »</a>
					</li>
				</s:if>
				<s:else>
					<li class="active">
						<a href="<%= basePath %>user/show?keyword=<s:property value="keyword"/>&targetPage=<s:property value="pageInfo.nowPage + 1"/>">下一页 »</a>
					</li>
				</s:else>
			</ul>
	      </div>
	    </div>
	    
	  </div>



	  <!-- 此节点内部的内容会在弹出框内显示,默认隐藏此节点-->
    <div id="content" class="hidden" style="visibility:hidden;">
    <form id="form" action="<%=basePath%>user/add" class="form-horizontal">
        <div class="row">
          <div class="control-group" style="margin-left:15%;">
            <label class="control-label">账号：</label>
            <div class="controls">
              <input  type="text" name="user.id"
              class="input-normal control-text" data-rules="{required : true}">
            </div>
          </div>
          <div class="control-group" style="margin-left:15%;">
            <label class="control-label" >密码：</label>
            <div class="controls">
              <input type="text" name="user.password"
               value="12345" class="input-normal control-text" readonly="readonly" data-rules="{required : true,minlength:5}">
            </div>
          </div>
          <div class="control-group" style="margin-left:15%;">
            <label class="control-label">姓名：</label>
            <div class="controls">
              <input type="text" name="user.firstName"
               class="input-normal control-text" data-rules="{required : true}">
            </div>
          </div>
          <div class="control-group" style="margin-left:15%;">
            <label class="control-label">邮箱：</label>
            <div class="controls">
              <input type="text"  name="user.email"
              class="input-normal control-text" data-rules="{email:true}">
            </div>
          </div>
        </div>
       
      </form>
    </div>
    
    

 
<!-- 添加 script start --> 
    <script type="text/javascript">
        BUI.use(['bui/overlay','bui/form'],function(Overlay,Form){
    
      var form = new Form.HForm({
        srcNode : '#form'
      }).render();
 
      var dialog = new Overlay.Dialog({
            title:'添加用户',
            width:500,
            height:340,
            //配置DOM容器的编号
            contentId:'content',
            success:function () {
              $("#form").submit();
            }
          });
        
        $('#addUser').on('click',function () {
          dialog.show();
        });
       

      });
    </script>
<!-- script end -->

<!-- 删除 script -->
<script type="text/javascript">
     var href="";
        BUI.use('bui/overlay',function(Overlay){
          var dialog = new Overlay.Dialog({
            title:'确认框 ',
            width:300,
            height:200,
            bodyContent:'<p>是否确认删除  ？ </p>',
            success:function () {
            	console.log(href);
            	window.location.href=href;
            }
          });
        
        $('.delete').on('click',function (e) {
        	e.preventDefault();//a标签禁用
        	href=this.href;
          	dialog.show();
        });
        
		$('.update').on('click',function (e) {
			e.preventDefault();//a标签禁用
        	var value = this.title; //^_^  ok
        	console.log(href);
			<!--window.location.pathname ="/id="+value;-->
			window.location.href='<%=basePath%>user/showEdit?user.id='+ value;
        });
    });
        

  </script>
</body>
</html>